<template>
    <div>
        <show-view-path :parent-views="parentViews" :screenConfig="screenConfig" :chartConfig="chartConfig"
                        @selectView="selectView"></show-view-path>
        <div style="height: 100%" :ref="config.key" :key="config.key"></div>
    </div>
</template>

<script>
/*
	常规柱状图
 */
import ChartPublic from './chart-public.js';
import ChartStyle from './chart-style.js';
import StaticDataFunc from "./static-data-func.js";

export default {
    name: "generalBar-view",
    mixins: [ChartPublic, ChartStyle,StaticDataFunc],
    data() {
        return {
            chartType: "bar"
        }
    },
    methods: {
        setOption() {
            //图例组件
            let legend = [];
            //直角坐标系 grid 中的 x 轴
            let xAxis = {};
            //x轴维度配置
            let xAxisArr = [];
            //yAxis直角坐标系 grid 中的 y 轴
            let yAxis = "";
            /**
             *系列列表
             [{name: 名称,
             type: 类型,
             data: 数据 []
             }]
             */
            let series = [];

            //双Y轴
            if (this.config.styles.yAxisShow2) {
                yAxis = [];
                //第一Y轴
                let yAxis1 = {type: 'value', axisLine: {show: false}};
                if (this.config.styles) {
                    yAxis1['show'] = this.config.styles.yAxisShow
                }
                //修改y轴颜色
                //Y轴在grid区域中的分隔线
                this.splitLineStyle(yAxis1, this.config.styles.yGrid)
                this.chartYlineStyle(yAxis1, this.config.styles.yAxisConfig,this.config.dataSources.measures2);
                yAxis.push(yAxis1);

                //第二Y轴
                let yAxis2 = {type: 'value', axisLine: {show: false}};
                //修改y轴样式风格
                //判断是否隐藏Y轴
                if (this.config.styles) {
                    yAxis2['show'] = this.config.styles.yAxisShow2
                }
                //修改y轴颜色
                //Y轴在grid区域中的分隔线
                this.splitLineStyle(yAxis2, this.config.styles.yGrid)
                this.chartYlineStyle(yAxis2, this.config.styles.yAxisConfig2);
                yAxis.push(yAxis2);
            } else {
                yAxis = {type: 'value', axisLine: {show: false}};
                //修改y轴样式风格
                //判断是否隐藏Y轴
                if (this.config.styles) {
                    yAxis['show'] = this.config.styles.yAxisShow
                }
                //Y轴在grid区域中的分隔线
                this.splitLineStyle(yAxis, this.config.styles.yGrid)

                //修改y轴颜色
                this.chartYlineStyle(yAxis, this.config.styles.yAxisConfig)
            }
            //静态数据模式
            if (this.config.dataSources.source == "static") {
                if (this.config.dataSources.staticData) {
                    //静态数据
                    let staticData = JSON.parse(this.config.dataSources.staticData);
                    for (let i = 0; i < staticData.series.length; i++) {
                        staticData.series[i].type = this.chartType;
                        if (staticData.series[i].name) {
                            legend.push(staticData.series[i].name);
                        }
                    }
                    xAxis = {
                        type: 'category',
                        data: staticData.categories,
                        show: this.config.styles.xAxisShow,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: this.config.advancedConf.xAxisColor ? this.config.advancedConf.xAxisColor : "#333"
                            }
                        },
                    }
                    //修改x轴颜色
                    this.chartXlineStyle(xAxis);
                    series = this.initStaticSeries(staticData.series);
                }
            } else {
                //获取维度
                xAxis = this.getDimensions(xAxisArr);
                //判断是否隐藏x轴
                if (this.config.styles) {
                    xAxis.show = this.config.styles.xAxisShow
                }
                //修改x轴颜色
                this.chartXlineStyle(xAxis)
                //未配置颜色图例
                if (this.config.dataSources.colorLegends.length == 0) {
                    //获取度量
                    this.calMeasures(this.config.dataSources.measures, legend, series, 0);
                    //双Y轴
                    if (this.config.styles.yAxisShow2) {
                        this.calMeasures(this.config.dataSources.measures2, legend, series, 1);
                    }
                } else {
                    //图例组件配置
                    let legendArr = [];
                    //第一Y轴
                    let legend1 = [];
                    let legendArr1 = [];
                    this.calMeasuresAndColorLegend(this.config.dataSources.measures, legendArr1, legend1, series, xAxisArr, 0);
                    legend.push(...legend1);
                    legendArr.push(...legendArr1);
                    //双Y轴
                    if (this.config.styles.yAxisShow2) {
                        let legend2 = [];
                        let legendArr2 = [];
                        this.calMeasuresAndColorLegend(this.config.dataSources.measures2, legendArr2, legend2, series, xAxisArr, 1);
                        legend.push(...legend2);
                        legendArr.push(...legendArr2);
                    }
                }
            }
            let dataZoom = [];
            if(this.config.styles.dataZoomShow && xAxis.data.length>this.config.styles.dataZoom.numeral){
                    //X轴是否滚动
                    dataZoom.push({
                        type: 'slider',
                        show: true,
                        xAxisIndex: [0],
                        start: this.config.styles.dataZoom.start, // 初始范围的起始百分比
                        end: this.config.styles.dataZoom.end // 初始范围的结束百分比
                    });
                    if(this.config.styles.insideShow){
                        dataZoom.push({
                            type: 'inside',
                            start:this.config.styles.inside.start,
                            end: this.config.styles.inside.end
                        })
                    }
            }
            this.option = {
                tooltip: this.chartTooltip(),//提示框的样式修改
                grid: this.chartGrid(),//grid离容器的边距设置
                toolbox: this.chartToolbox(),//工具栏目配置
                color: this.getColors(),
                legend: this.chartLegend(legend),//图例
                xAxis: xAxis,
                yAxis: yAxis,
                series: series,
                dataZoom:dataZoom
            };
        },
        calMeasures(measures, legend, series, yAxisIndex) {
            for (let i = 0; i < measures.length; i++) {
                let array = [];
                let measure = measures[i];
                let fieldName = measure.tableName ? measure.tableName + '_' + measure.fieldName : measure.fieldName;
                legend.push(measure.fieldLabel);
                for (let j = 0; j < this.data.length; j++) {
                    let value = this.data[j][fieldName];
                    if (value) {
                        array.push(value);
                    } else {
                        array.push(0);
                    }
                }
                let obj = {
                    name: measure.fieldLabel,
                    type: this.chartType,
                    data: array,
                    label: {}
                }
                obj.yAxisIndex = yAxisIndex || 0;
                //柱形宽度
                if (this.config.styles.barConfig && this.config.styles.barConfig.barWidth) {
                    if (this.config.styles.barConfig.widthSuffix == 'px') {
                        obj.barWidth = this.config.styles.barConfig.barWidth;
                    } else {
                        obj.barWidth = this.config.styles.barConfig.barWidth + '%';
                    }
                }
                //柱状图圆角
                if (this.config.styles.barConfig && this.config.styles.barConfig.radius) {
                    let numberList = this.filletedCorner(this.config.styles.barConfig.radius)
                    let itemStyle = {
                        normal: {
                            barBorderRadius: numberList
                        }
                    }
                    obj['itemStyle']=itemStyle;
                }
                //是否展示顶部信息
                if (this.config.styles.barConfig && this.config.styles.barConfig.showData) {
                    obj.label={
                        show: this.config.styles.barConfig.showData,
                        position: 'top',
                        color: this.config.styles.barConfig.fontColor
                    };
                }
                //获取预警线数据和样式
                let markLine = {
                    type: 'bar',
                    silent: true, //基线显示 隐藏
                    symbol: 'none', // 不显示箭头和圆点
                    data: this.markLine(array),//获取属性样式
                }
                obj['markLine'] = markLine
                series.push(obj);
            }
        },
        calMeasuresAndColorLegend(measures, legendArr, legend, series, xAxisArr, yAxisIndex) {
            //根据颜色图例与度量获取图例组件
            for (let i = 0; i < this.config.dataSources.colorLegends.length; i++) {
                let colorLegend = this.config.dataSources.colorLegends[i];
                let fieldName = colorLegend.tableName ? colorLegend.tableName + '_' + colorLegend.fieldName : colorLegend.fieldName;
                for (let j = 0; j < measures.length; j++) {
                    let measure = measures[j];
                    for (let k = 0; k < this.data.length; k++) {
                        let colorValue = this.getColorValue(this.data[k], colorLegend, measure, true);
                        let number = legend.indexOf(colorValue);
                        if (number == -1) {
                            legend.push(colorValue);
                            legendArr.push({
                                key: measure.tableName ? measure.tableName + "_" + measure.fieldName : measure.fieldName,
                                fieldName: fieldName,
                                value: this.data[k][fieldName]
                            })
                        }
                    }
                }
            }
            for (let i = 0; i < legendArr.length; i++) {
                let legendObj = legendArr[i];
                let array = [];
                for (let j = 0; j < xAxisArr.length; j++) {
                    let val = 0;
                    for (let k = 0; k < this.data.length; k++) {
                        let xAxisObj = xAxisArr[j];
                        if (this.config.dataSources.dimensions.length > 1) {
                            let xAxisKeys = xAxisObj.key.split("-");
                            let xAxisVal = "";
                            for (let l = 0; l < xAxisKeys.length; l++) {
                                if (l != 0) {
                                    xAxisVal += "-";
                                }
                                let xVal = this.data[k][xAxisKeys[l]];
                                //维度配置了字段渲染
                                if (typeof (xVal) != 'string') {
                                    xVal = xVal.oldValue;
                                }
                                xAxisVal += xVal;
                            }
                            if (xAxisVal == xAxisObj.value && this.data[k][legendObj.fieldName] == legendObj.value) {
                                val = this.data[k][legendObj.key];
                                break;
                            }
                        } else {
                            let xVal = this.data[k][xAxisObj.key];
                            //维度配置了字段渲染
                            if (typeof (xVal) != 'string') {
                                xVal = xVal.oldValue;
                            }
                            if (xVal == xAxisObj.value && this.data[k][legendObj.fieldName] == legendObj.value) {
                                val = this.data[k][legendObj.key];
                                break;
                            }
                        }

                    }
                    array.push(val)
                }

                let obj = {
                    name: legend[i],
                    type: this.chartType,
                    data: array,
                }
                //柱形宽度
                if (this.config.styles.barConfig && this.config.styles.barConfig.barWidth) {
                    if (this.config.styles.barConfig.widthSuffix == 'px') {
                        obj.barWidth = this.config.styles.barConfig.barWidth;
                    } else {
                        obj.barWidth = this.config.styles.barConfig.barWidth + '%';
                    }
                }
                //柱状图圆角
                if (this.config.styles.barConfig && this.config.styles.barConfig.radius) {
                    let numberList = this.filletedCorner(this.config.styles.barConfig.radius)
                    let itemStyle = {
                        normal: {
                            barBorderRadius: numberList
                        }
                    }
                    obj['itemStyle']=itemStyle;
                }
                //是否展示顶部信息
                if (this.config.styles.barConfig && this.config.styles.barConfig.showData) {
                    obj.label={
                        show: this.config.styles.barConfig.showData,
                        position: 'top',
                        color: this.config.styles.barConfig.fontColor
                    };
                }
                obj.yAxisIndex = yAxisIndex || 0;
                //获取预警线数据和样式
                let markLine = {
                    type: 'bar',
                    silent: true, //基线显示 隐藏
                    symbol: 'none', // 不显示箭头和圆点
                    data: this.markLine(),//获取属性样式
                }
                obj['markLine'] = markLine
                series.push(obj);
            }
        }
    },
    watch: {}
}
</script>

<style scoped>
.a {
    text-align: right;
}
</style>
